<template>
    <div id="app" >
        <div class="my-bj" >
            <van-icon name="setting-o" size="30px"/>
            <div class="my-tx">
             <img :src="'http://192.168.40.177:8008/api/file/'+ userinfo.avatar"/>
                <p>{{userinfo.nickname}}</p>
            </div>
            <!--黑色-->
     <div class="my-tab">
        <mytoint :number="userinfo.nowMoney" :tetx="'余额'"></mytoint>
        <mytoint :number="userinfo.couponCount"   :tetx="'优惠券'"></mytoint>
        <mytoint :number="userinfo.payCount"  :tetx="'购买数'"></mytoint>
        <mytoint :number="userinfo.integral" :tetx="'积分'"></mytoint>
     </div>
        </div>
        <!-- 图标-->
        <div class="dh">
        <van-grid :column-num="5">
            <van-grid-item icon="shop-o" text="未支付" />
            <van-grid-item icon="logistics" text="待发货" />
            <van-grid-item icon="goods-collect-o" text="待收货" />
            <van-grid-item icon="shopping-cart-o" text="待评价" />
            <van-grid-item icon="cart-o" text="已完成" />
        </van-grid>
        </div>
        <!-- 中间-->
        <div class="dzgl">
        <van-cell is-link icon="location" title="地址管理" @click="show = true" />
            <van-cell is-link icon="paid" title="我的钱包" @click="show = true" />
            <van-cell is-link icon="goods-collect" title="我的收藏" @click="show = true" />
            <van-cell is-link icon="underway" title="我的足迹" @click="show = true" />
            <van-cell is-link icon="setting" title="修改密码" @click="show = true" />
        </div>
        <!--按钮-->
         <div class="tcdl">
             <van-button type="danger">退出登录</van-button>
         </div>
        <!--底部 -->
       <tab-bar></tab-bar>
    </div>
</template>

<script>
    //导入
    import Mytoint from "@/components/mytoint";
    import TabBar from "@/components/TabBar";

    import axios from 'axios'
    export default {
        data(){
           return{
               //底部导航
               active: 3,
               userinfo:{}
           };
       },
        created() {
            // //全局数据获取
            // var value =this.$store.state.value
            // console.log("原始全局数据:" + value)
            // //1修改数据
            // this.$store.dispatch('setValue',2)
            //
            // var newValue = this.$store.state.value
            //
            // console.log("新的全局数据:"+ newValue)
    var token = this.$store.state.token
            //发起请求获取登录信息的用户信息
            axios({

                url:"http://192.168.40.177:8008/api/userinfo",
                headers:{
                    Authorization:"Bearer " +token
                }

            }).then(res =>{
                console.log(res)

                var da =res.data

             //判断功能是否成功
                 var success=da.success
                if(success == true){
                    var data =da.data

                    this.userinfo = data
                    console.log(data)
                }
            })

        },
        components: {
            TabBar,
            Mytoint

        },

    }
</script>

<style>
    #app{
        background-color: #f8f8f8;
    }
    /*地址管理*/
    .van-icon-location {
        color:#5fcda2;
    }
    /*我的钱包*/
     .van-icon-paid{
         color: brown;
     }
    /* 我的收藏*/
    .van-icon-goods-collect{
        color: #54b4ef;
    }
    /*我的足迹*/
     .van-icon-underway{
         color: #e07472 ;
     }
    /*修改密码*/
    .van-icon-setting{
        color:#e07472 ;
    }
    /*最后*/
    .dzgl{
        width: 90%;
        margin: 25px auto 20px;
    }
    /*头上的图标*/
    .van-icon.van-icon-setting-o{
        color: white;
        margin-left: 350px;
        position: relative;
        top: 20px;
    }
    .sp1{
      margin-top: 10px;
      color:#ee436a;
      display: flex;
      flex-direction: column;
  }
  .sp2{
      color: #e6e9ec;
  }
    /*退出登录*/
    .tcdl{
        width:90%;
        margin: 0 auto;
        margin-top: 20px;
    }
    .van-button--normal{
        width: 100%;
    }

    /*中间*/
    .dh{

        width: 90%;
        margin: 35px auto 20px;
    }
    /*优惠券*/
    .my-tab{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        border-radius: 10px;
        height: 70px;
        width: 370px;
        background-color: #3e171f;
        margin-top: -5px;
    }
    /*.hz{*/
    /*    text-align: center;*/
    /*    margin-top: 0.21333rem;*/
    /*    width: 25%;*/
    /*    float: left;*/
    /*}*/
    .my-tx p{
     color: aliceblue;
     display: block;
    margin-top: 100px;
    }
    .my-tx img{
        margin-top: 20px;
    }
    .my-tx{
        display: flex;
    }
.my-bj{
    height: 250px;
    background-image: url("http://192.168.40.177:8085/static/img/userBg.af99f286.png");
    border-radius: 0 0 35px 35px;
}
</style>